<template>
  <div>
    <el-card class="box-card">
      <i class="el-icon-location"></i>
      <span>{{ username }}</span>
      <span>{{ phone }}</span>
      <button
        @click="dialogVisible = true"
        style="background-color: #fff; float: right; font-size: 30px;"
      >
        >
      </button>
      <br />

      <div style="margin-top: 10px;">
        <span>{{ address }}</span>
      </div>
    </el-card>

    <el-row id="order">
      <el-col
        :span="8"
        v-for="(o, index) in shoplist"
        :key="index"
        :offset="index > 0 ? 2 : 0"
        class="order"
      >
        <el-card :body-style="{ padding: '0px' }">
          <img :src="o.url" class="image" />
          <div class="msg" style="padding: 14px;">
            <i class="iconfont icon-mendian1"></i>
            <span
              style="margin-left: 1px; font-size: 20px; font-family: fantasy;"
            >
              <!-- 商家 -->
              <b>
                {{ o.merchant }}
              </b>
            </span>
            <a
              href="/all"
              style="
                color: rgb(125, 125, 125);
                margin-left: 10px;
                font-size: 25px;
              "
            >
              >
            </a>

            <br />
            <br />

            <!-- 商品简介 -->
            <span
              style="
                margin-left: 1px;
                font-size: 19px;
                color: rgb(52, 52, 52);
                font-family: cursive;
              "
            >
              {{ o.description }}
            </span>
            <br />
            <br />

            <!-- 商品规格 -->
            <span
              style="
                margin-left: 1px;
                font-size: 15px;
                color: rgb(125, 125, 125);
                font-family: cursive;
              "
            >
              {{ o.specifications }}
            </span>
            <br />
            <br />
            <span style="margin-left: 1px; font-size: 17px;">
              总计:{{ o.money }}元
            </span>

            <div class="bottom clearfix">
              <el-button round @click="dialogVisible = true">
                查看详情
              </el-button>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <div style="float: right; margin-top: 10px; margin-right: 40px;">
      <a href="/checkout">
        <el-button type="success" round>确认订单</el-button>
      </a>
    </div>

    <!-- 选择地址模态框 -->
    <el-dialog
      :visible.sync="dialogVisible"
      width="29%"
      hight="100%"
      :before-close="handleClose"
    >
      <el-form style="background-color: rgb(230, 230, 230);">
        <el-form-item label="收货人" :label-width="formLabelWidth">
          <el-input
            maxlength="10"
            v-model="username"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="收货电话" :label-width="formLabelWidth">
          <el-input
            maxlength="11"
            v-model="phone"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="收货地址" :label-width="formLabelWidth">
          <el-input v-model="address" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button round @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" round @click="dialogVisible = false">
          确 定
        </el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
      formLabelWidth: '15px',
      username: '景衡光',
      phone: '13464864595',
      address: '闽西职业技术学院',
      shoplist: [
        {
          url:
            'https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png',
          merchant: '华麦基汉堡店',
          description: '老八秘制蟹黄堡，既实惠又管饱，来点小鸟伏特加。',
          specifications: '老八秘制套餐+小食+中可',
          money: '4644',
          address: '上海市普陀区金沙江路 1518 弄',
        },
        {
          url:
            'https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png',
          merchant: '华麦基汉堡店',
          description: '老八秘制蟹黄堡，既实惠又管饱，来点小鸟伏特加。',
          specifications: '老八秘制套餐+小食+中可',
          money: '4646',
          address: '上海市普陀区金沙江路 1518 弄',
        },
      ],
    }
  },
  methods: {
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(() => {
          done()
        })
        .catch(() => {})
    },
  },
}
</script>
<style scoped>
* {
  margin: 0px;
  padding: 0px;
}
.el-checkbox__input.is-checked + .el-checkbox__label {
  color: black;
}
.el-card {
  width: 50vw;
  height: 8vw;
  margin: auto;
  padding: 0px;
}
.el-card__body {
  padding-top: 0px !important;
}
.el-card span {
  margin-left: 40px;
}
.el-icon-location {
  color: white;
  text-align: center;
  line-height: 40px;
  font-size: 37px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: rgb(255, 184, 52);
  float: left;
  margin-top: 10px;
}
.el-form {
  height: 290px;
  border-radius: 5px;
}
#order .el-card {
  margin-top: 20px;
  width: 60vw;
  height: 19vw;
}
hr {
  background-color: rgb(0, 0, 0) !important;
  height: 1.3px !important;
}
.iconfont {
  color: rgb(181, 110, 4) !important;
}
.order {
  margin-bottom: 15px !important;
  margin-left: 20px !important;
  width: 97vw !important;
  float: left !important;
}
.msg {
  float: left !important;
}
.el-card img {
  width: 210px !important;
  border: none !important;
  padding: 20px !important;
  float: left !important;
}
.time {
  font-size: 13px !important;
  color: #999 !important;
}

.bottom {
  margin-top: 18px !important;
  line-height: 12px !important;
}

.button {
  padding: 0 !important;
  float: right !important;
}

.image {
  width: 100% !important;
  display: block !important;
}

.clearfix:before,
.clearfix:after {
  display: table !important;
  content: '' !important;
}

.clearfix:after {
  clear: both !important;
}
.el-dialog span {
  font-size: 17px !important;
}
.el-checkbox__input.is-checked + .el-checkbox__label {
  color: black;
}
</style>